<template>
  <Dialog ref="dialog" width="800" :title="title">
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      label-width="auto"
      :rules="rules"
      status-icon
    >
      <el-row class="el-col-24">
        <el-form-item class="form_item el-col-10" label="菜单名" prop="name">
          <el-input v-model="ruleForm.name" placeholder="请输入菜单名" />
        </el-form-item>
        <el-form-item
          class="form_item el-col-10"
          label="权限"
          prop="permissions"
        >
          <el-input
            v-model="ruleForm.permissions"
            placeholder="请输入按钮权限"
          />
        </el-form-item>
      </el-row>
      <el-row class="el-col-24">
        <el-form-item class="form_item el-col-10" label="规则" prop="url">
          <el-input v-model="ruleForm.url" placeholder="请输入规则" />
        </el-form-item>
        <el-form-item class="form_item el-col-10" label="路径" prop="path">
          <el-input v-model="ruleForm.path" placeholder="请输入路径" />
        </el-form-item>
      </el-row>
      <el-row class="el-col-24">
        <el-form-item class="form_item el-col-10" label="机构" prop="storeId">
          <el-select
            v-model="ruleForm.storeId"
            filterable
            placeholder="请选择机构"
            style="width: 100%"
          >
            <el-option
              v-for="item in storeList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item
          class="form_item el-col-12"
          label="icon"
          prop="iconFont"
          style="display: flex; flex-direction: row"
        >
          <el-select
            v-model="ruleForm.iconFont"
            placeholder="选择图标"
            style="width: 150px"
          >
            <!-- 动态渲染图标选项 -->
            <el-option
              v-for="(icon, index) in iconOptions"
              :key="index"
              :label="icon"
              :value="icon"
            >
              <template #default>
                <i
                  :class="'iconfont ' + icon"
                  style="font-size: 20px; margin-right: 10px"
                ></i>
                {{ icon }}
              </template>
            </el-option>
          </el-select>

          <span style="margin-left: 20px"
            >所选图标 <i class="iconfont" :class="ruleForm.iconFont"></i
          ></span>
        </el-form-item>
      </el-row>
      <el-divider />
      <div class="right">
        <el-button class="height40" @click="closeChange">取消</el-button>
        <el-button type="primary" class="height40" @click="submit"
          >提交</el-button
        >
      </div>
    </el-form>
  </Dialog>
</template>
<script setup>
import Dialog from '@/components/Dialog/Dialog.vue';
import { ElMessage } from 'element-plus';
import { customerMenuSave } from '@/api/appv2/appv2';
// 图标选项
import iconOptions from './iconOptions';
import { ref } from 'vue';
const emit = defineEmits(['getMenuConfig']);
import { omit } from 'lodash';
let { proxy } = getCurrentInstance();
const { storeList } = defineProps({
  storeList: {
    type: Array,
    default: () => [],
  },
});
const ruleForm = ref({
  name: '',
  permissions: '',
  url: '',
  path: '',
  id: '',
  iconFont: '', // 存储选中的图标
});

const dialog = ref(null);
const title = ref('新建菜单');
const parentInfo = ref({});
const rules = {
  name: [{ required: true, trigger: 'blur', message: '请输入目录名称' }],
  // permissions: [{ required: true, trigger: 'blur', message: '请输入权限' }],
  url: [{ required: true, trigger: 'blur', message: '请输入规则' }],
  path: [{ required: true, trigger: 'blur', message: '请输入路径' }],
  storeId: [{ required: true, trigger: 'blur', message: '请输入机构ID' }],
};

function submit() {
  let formData = { ...ruleForm.value }; // Assuming ruleForm is defined
  let type = 0;
  if (title.value.includes('按钮')) {
    type = 2;
  } else if (title.value.includes('新增菜单')) {
    type = 1;
  } else if (title.value.includes('编辑菜单')) {
    type = 3;
  }

  // Prepare object based on type and validation
  let submitData = {
    level: '2',
  };

  if (type != 3) {
    submitData.parentId =
      type == 1 ? parentInfo.value.id : parentInfo.value.parentId;
    submitData.type = type;
  } else {
    submitData.id = parentInfo.value.id;
    submitData.parentId = parentInfo.value.parentId;
    submitData.storeId = parentInfo.value.storeId;
  }
  proxy.$refs.ruleFormRef.validate((valid) => {
    const params = {
      ...formData,
      ...submitData,
    };
    if (valid) {
      // 通过 omit 返回一个新的对象
      customerMenuSave(omit(params, ['children']))
        .then((res) => {
          if (res.code == 20000) {
            ElMessage.success('操作成功');
            dialog.value.closeChange();
            emit('getMenuConfig');
          }
        })
        .catch(() => {});
    } else {
      ElMessage.warning('请完善信息');
    }
  });
}

// 打开弹窗
function openchange(val, type) {
  parentInfo.value = val;

  if (type === 1) {
    title.value = '新增菜单';
    ruleForm.value = { name: '', permissions: '', url: '', path: '' }; // 重置表单
  } else {
    // 判断是按钮还是菜单编辑
    const isButton = val && val.type !== 1;
    title.value = type === 2 ? '新增按钮' : isButton ? '编辑按钮' : '编辑菜单';

    ruleForm.value =
      type == 2 && !isButton
        ? { name: '', permissions: '', url: '', path: '', storeId: '' }
        : val;
  }
  dialog.value.openChange();
}

// 关闭弹窗
function closeChange() {
  dialog.value.closeChange();
}
defineExpose({
  openchange,
});
</script>
<style>
.form_item {
  margin-bottom: 20px !important;
}

.right {
  margin-left: 40px;
}
</style>
